<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#can{
				border:1px solid #ccc;
				margin: 10px auto;
				display: block;
			}
		</style>
	</head>
	<body>
		<canvas id="can" width="700" height="500"></canvas>
		<script type="text/javascript">
			//获取到canvas的dom对象
			var dom = document.getElementById("can")
			
			//获取绘图对象
			var can = dom.getContext("2d")
			
			//定义线段起点
//			can.moveTo(40,250)
			
			//定义线段中点
//			can.lineTo(350,250)
			
//			can.lineTo(40,290)
//			can.lineTo(700,0)
			
			
			//设置折角的长度范围值  当折角的长度超过该值时 才会变成折角
//			can.miterLimit = 30000
			
			//设置线条或描边的样式
//			can.strokeStyle = "#09f"
			
			//设置线条或描边的粗细
//			can.lineWidth = 15
			
			
//			can.lineCap = "round" butt为默认值  round为圆形线帽  square代表方形线帽			
//			can.lineCap = "butt"   
			
			//设置折线折角样式  round代表圆角  bevel代表折角 miter为默认值 尖角
//			can.lineJoin = "miter"
			
			//开始描边
//			can.stroke()
			
			//从新绘制元素.类似于ps中的新建图层
//			can.beginPath()
			
//			can.rect(x,y,w,h)
			//x,y代表矩形左上角的坐标值   w代表 矩形宽度  h代表矩形高度
//			can.rect(50,50,200,100)
			
//			can.stroke()
//			can.fill()
			
//			can.stroke()
//			can.fill()
//			can.fillRect(50,50,200,150)
//			can.strokeRect(50,50,300,100)
//			can.rect(400,300,100,50)
//			can.stroke()
			
			//can.arc(x,y,r,start,end)
			//画弧
//			can.arc(350,250,150,-2*Math.PI/360*37.5,0)
			
//			can.stroke()
//			can.fill()

//			位移
//			缩放
//			旋转
//			can.translate(100,0)

			//保存当前的画布状态
//			can.save()
//			can.rotate(0.25*Math.PI)

//			can.scale(2,2)
			
//			can.fillRect(0,0,200,100)
			
//			can.beginPath()
			
			//将画布恢复成上一次保存的状态
//			can.restore()
			//画布状态读取过一次之后 下次在读取就会出现问题  所以最好的做法是每次取完状态后,立马再次保存一下  以便下次使用
//			can.save()
			
//			can.shadowOffsetX = 5;
//			can.shadowOffsetY = 5;
//			can.shadowBlur = 10
//			can.shadowColor = "rgba(0,0,0,0.79)"

			//获取渐变对象
			let lgObj = can.createLinearGradient(100,100,300,100)
			
			//给渐变添加色块 并设定色块在渐变中的位置值范围为0-1
			lgObj.addColorStop(0,"#0072ff")
			lgObj.addColorStop(0.75,"#f6ff00")
			lgObj.addColorStop(1,"#12ff00")
			
//				can.lineWidth = 20
//			can.fillStyle = lgObj
			can.strokeStyle = lgObj
			can.strokeRect(100,100,200,100)
			
			
			
			
//			can.arc(0,250,30,0,2*Math.PI)
			
//			can.stroke()
			
		</script>
	</body>
</html>
